<!-- Circles -->
<script id='circle-template' type='text/x-underscore-template'>
  <div class='circle-icon {{ icon }}'><i></i></div>

    {{#count}}
    <div class='circle-inner'>
      <div class='circle-counter'>{{ count }}</div>
      <div class='circle-title'>{{ title }}</div>
      <div class='circle-background'></div>
      <div class='circle-explore'>GFW Interactive Map</div>
    </div>
    {{/count}}

    {{^count}}
    <div class='circle-inner fake_title'>
      <a href="{{ link }}" class='circle-counter'>{{ title }}</div>
    </div>
    {{/count}}
  </div>
</script>


<!-- Filters -->
<script id='filter-template' type='text/x-underscore-template'>
  <li class='filter {{ category }}' data-id='{{ data }}'>
    <a href='#' style='color: {{ category_color }}'>{{ name }}</a>

    <div class='filter-line' style='background-color: {{ category_color }}'></div>
  </li>
</script>

<script id='layer-item-radio-loss-template' type='text/x-underscore-template'>
  <li id='filter_{{ id }}' class='{{ category }}'>
    <a href='#' class='radio {{ category }} {{ slug }}' data-name='{{ category }}'>{{name}}</a>
    <a href='#' data-source='{{slug}}' class='source'></a>

    <p class='subtitle{{ subtitle ? '' : ' hidden'}}'>{{subtitle}}</p>
    <ul class='extra'></ul>
  </li>
</script>

<script id='layer-item-checkbox-loss-template' type='text/x-underscore-template'>
  <li id='filter_{{ id }}' class='{{ category }}'>
    <a href='#' data-id='{{ id }}' data-color='{{ color}}' class='checkbox'>
      <i><span></span></i>
      <span class='name'>{{ name }}</span>
    </a>

    <p class='subtitle{{ subtitle ? '' : ' hidden' }}'>{{subtitle}}</p>
  </li>
</script>

<script id='layer-item-radio-template' type='text/x-underscore-template'>
  <li id='filter_{{ id }}' class='{{ category }}'>
    <a href='#' class='radio {{ category }} {{ slug }} {{ disabled ? 'disabled' : '' }}' data-name={{ category }}>{{name}}</a>
    <a href='#' data-source='{{slug}}' class='source{{ slug == 'nothing' ? ' hidden' : '' }}'></a>
    <p class='subtitle{{ subtitle ? '' : ' hidden'}}'>{{subtitle}}</p>
  </li>
</script>

<script id='layer-item-checkbox-template' type='text/x-underscore-template'>
  <li id='filter_{{ id }}' class='{{ category }} {{slug}}'>
    <a href='#' data-id='{{ id }}' data-color='{{ color}}' class='checkbox {{ disabled ? 'disabled' : '' }}'>
      <i><span></span></i>
      <span class='name'>{{name}}</span>
    </a>

    <a href='#' data-source='{{slug}}' class='source{{ slug === !source ? ' hidden' : '' }}'></a>
  </li>
</script>

<script id='layer-item-disabled-template' type='text/x-underscore-template'>
  <li id='filter_{{ id }}' class='{{ category }} disabled'>
    <span class='{{ category }} {{ disabled ? 'disabled' : '' }}' data-name={{ category }}>
      <span class='name'><strong>{{name}}</strong>Coming soon…</span>
    </span>
  </li>
</script>

<!-- Legends -->
<script id='legend-template' type='text/x-underscore-template'>
  <a href='#' class='toggle'></a>
  <div class='layer_count'>0 layers</div>
  <div class='content'></div>
  <div class='shadow'></div>
</script>

<script id='legend-idn-primary-template' type='text/x-underscore-template'>
  <ul class='legend_category {{category}}{{#sublayer}} sublayer{{/sublayer}}'>
    <li class='{{category}}'><strong style='color:{{category_color}};'>{{category_title}}</strong></li>

    <li id='{{cat_id}}' class='{{category}}'>
      <i style='background-color:{{title_color}};'></i>
      {{title}} <a href='#' data-source='{{slug}}' class='source {{slug}}'></a>
    </li>

    <ul style="margin-bottom:10px">
      <li id='{{cat_id}}' class='intact'> <i style='background-color:{{title_color}};'></i> Intact</li>
      <li id='{{cat_id}}' class='degraded'> <i style='background-color:#97BD3D'></i> Degraded</li>
    </ul>

  </ul>
</script>

<script id='legend-ifl_2013-template' type='text/x-underscore-template'>
  <ul class='legend_category {{category}}{{#sublayer}} sublayer{{/sublayer}}'>
    <li class='{{category}}'><strong style='color:{{category_color}};'>{{category_title}}</strong></li>

    <li id='{{cat_id}}' class='{{category}}'>
      <i style='background-color:{{title_color}};'></i>
      Intact Forest Landscapes 2013 <a href='#' data-source='{{slug}}' class='source {{slug}}'></a>
    </li>

    <ul style="margin-bottom:10px">
      <li id='{{cat_id}}' class='intact'> <i style='background-color:{{title_color}};'></i> Intact Forest Landscapes</li>
      <li id='{{cat_id}}' class='degraded'> <i style='background-color:#97BD3D'></i> Reduction in Extent 2000-2013</li>
    </ul>

  </ul>
</script>

<script id='legend-loss-template' type='text/x-underscore-template'>
  <ul class='legend_category {{category}}'>
    <li class='{{category}}'><strong style='color:{{category_color}};'>{{category_title}}</strong></li>

    <li id='{{cat_id}}' class='{{category}}'>
      <i style='background-color:{{title_color}};'></i> {{title}} <a href='#' data-source='{{slug}}' class='source {{slug}}'></a>
    </li>

    <ul>
      <li id='{{cat_id}}' class='loss'> <i style='background-color:{{title_color}};'></i> Loss</li>
      <li id='{{cat_id}}' class='forestgain'> <i style='background-color:#6d6de5'></i> Gain</li>
    </ul>

    {{#sublayer}}
    <!-- div class='coverage_category'>
      <a href='#' data-id='{{id}}' data-color='{{category_color}}' class='checkbox {{slug}}'>
        <i><span></span></i><span class='name'>Geographic coverage</span>
      </a>
      <a href='#' data-source='{{slug}}' class='source coverage {{slug}}'></a>
    </div -->
    {{/sublayer}}

    {{#legend}}
    <!-- ul class='legend_info {{legend_class}}'>
      <li class='forest2000'>
        <strong>{{{ legend }}}</strong>

        <div class='data'>
          <div class='colors'>
            {{#colors}}
            <div class='quartile' style='background-color:{{color}}'>{{title}}</div>
            {{/colors}}

            {{#wide}}
            <div class="quartile wide" style="background: {{color_min}};background: -moz-linear-gradient(left, {{color_min}} 0%, {{color_max}} 100%);background: -webkit-gradient(linear, left top, right top, color-stop(0%,{{color_min}}), color-stop(100%,{{color_max}}));background: -webkit-linear-gradient(left, {{color_min}} 0%,{{color_max}} 100%);background: -o-linear-gradient(left, {{color_min}} 0%,{{color_max}} 100%);background: -ms-linear-gradient(left, {{color_min}} 0%,{{color_max}} 100%)background: linear-gradient(to right, {{color_min}} 0%,{{color_max}} 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='{{color_min}}', endColorstr='{{color_max}}',GradientType=1 );background-image: -ms-linear-gradient(left, {{color_min}} 0%,{{color_max}} 100%)"></div>
            {{/wide}}
          </div>
        </div>
      </li>
    </ul -->
    {{/legend}}
  </ul>
</script>

<script id='legend-item-template' type='text/x-underscore-template'>
  <li id='{{cat_id}}' class='{{ category }}'>
    <i style='background-color:{{title_color}};'></i>
    {{title}} <a href='#' data-source='{{slug}}' class='source{{ slug == 'nothing' ? ' hidden' : '' }}'></a>

    {{#legend}}
    <ul class='legend_info {{legend_class}}'>
      <strong>{{{legend}}}</strong>

      <div class='data'>
        {{#min}}<div class='min'>{{min}}</div>{{/min}}
        {{#max}}<div class='max'>{{max}}</div>{{/max}}

        <div class='colors'>
          {{#colors}}
          <div class='quartile' style='background-color:{{color}}'>{{title}}</div>
          {{/colors}}

          {{#wide}}
          <div class="quartile wide" style="background: {{color_min}};background: -moz-linear-gradient(left, {{color_min}} 0%, {{color_max}} 100%);background: -webkit-gradient(linear, left top, right top, color-stop(0%,{{color_min}}), color-stop(100%,{{color_max}}));background: -webkit-linear-gradient(left, {{color_min}} 0%,{{color_max}} 100%);background: -o-linear-gradient(left, {{color_min}} 0%,{{color_max}} 100%);background: -ms-linear-gradient(left, {{color_min}} 0%,{{color_max}} 100%)background: linear-gradient(to right, {{color_min}} 0%,{{color_max}} 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='{{color_min}}', endColorstr='{{color_max}}',GradientType=1 );background-image: -ms-linear-gradient(left, {{color_min}} 0%,{{color_max}} 100%)"></div>
          {{/wide}}
        </div>
      </div>
    </ul>
    {{/legend}}
  </li>
</script>

<script id='legend-group-template' type='text/x-underscore-template'>
  <ul class='legend_category {{category}}{{#sublayer}} sublayer{{/sublayer}}'>
    <li class='{{category}}'><strong style='color:{{category_color}};'>{{category_title}}</strong></li>

    <li id='{{cat_id}}' class='{{category}}'>
      <i style='background-color:{{title_color}};'></i>
      {{title}} <a href='#' data-source='{{slug}}' class='source {{slug}}'></a>

      {{#legend}}
      <ul class='legend_info {{legend_class}}'>
        <strong>{{{legend}}}</strong>

        <div class='data'>
          {{#min}}<div class='min'>{{min}}</div>{{/min}}
          {{#max}}<div class='max'>{{max}}</div>{{/max}}

          <div class='colors'>
            {{#colors}}
            <div class='quartile' style='background-color:{{color}}'>{{title}}</div>
            {{/colors}}

            {{#wide}}
            <div class="quartile wide" style="background: {{color_min}};background: -moz-linear-gradient(left, {{color_min}} 0%, {{color_max}} 100%);background: -webkit-gradient(linear, left top, right top, color-stop(0%,{{color_min}}), color-stop(100%,{{color_max}}));background: -webkit-linear-gradient(left, {{color_min}} 0%,{{color_max}} 100%);background: -o-linear-gradient(left, {{color_min}} 0%,{{color_max}} 100%);background: -ms-linear-gradient(left, {{color_min}} 0%,{{color_max}} 100%)background: linear-gradient(to right, {{color_min}} 0%,{{color_max}} 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='{{color_min}}', endColorstr='{{color_max}}',GradientType=1 );background-image: -ms-linear-gradient(left, {{color_min}} 0%,{{color_max}} 100%)"></div>
            {{/wide}}
          </div>
        </div>
      </ul>
      {{/legend}}
    </li>

    {{#sublayer}}
    <div class='coverage_category'>
      <a href='#' data-id='{{id}}' data-color='{{category_color}}' class='checkbox {{slug}}'>
      <i><span></span></i><span class='name'>Geographic coverage</span>
      </a><a href='#' data-source='{{slug}}' class='source coverage {{ slug }}'></a>
    </div>
    {{/sublayer}}
  </ul>
</script>

<script id='legend-group-double-template' type='text/x-underscore-template'>
  <ul class='legend_category {{category}} double'>
    <li class='{{category}}'><strong style='color:{{category_color}};'>{{category_title}}</strong></li>
    <li id='{{cat_id}}' class='{{category}}'>
      <i style='background-color:{{category_color}};'></i>
      <div>{{title}} <a href='#' data-source='{{slug}}' class='source {{category}}'></a></div>
    </li>

    <ul>
      <li><i style='background-color:#F13689;'></i> <div>Deforestation</div></li>
      <li><i style='background-color:#FA98B9;'></i> <div>Degradation</div></li>
    </ul>

    {{#sublayer}}
    <div class='coverage_category'>
      <a href='#' data-id='{{ id }}' data-color='{{ category_color }}' class='checkbox {{slug}}'>
      <i><span></span></i><span class='name'>Geographic coverage</span>
      </a><a href='#' data-source='{{slug}}' class='source coverage {{slug}}'></a>
    </div>
    {{/sublayer}}
  </ul>
</script>

<!-- Timeline -->
<script id='timeline_loss-template' type='text/x-underscore-template'>
  <div class='timeline_coordinates'></div>
  <div class='timeline_legend'><p>UMD tree cover loss <span>(zoom in for most accurate viewing)</span></p></div>

  <div class='timeline-inner'>
    <div class='action'>
      <a class='play' href='#'></a>
      <a class='pause' href='#'></a>
    </div>

    <div class='time'>
      <div class='line'><div class='tipsy'><span>Year</span><div class='arrow'></div></div></div>

      <div class='trail'>
        <div class='handle left'>
          <div class='tipsy'>
            <span></span>
            <div class='arrow'></div>
          </div>
        </div>

        <div class='handle right'>
          <div class='tipsy'>
            <span></span>
            <div class='arrow'></div>
          </div>
        </div>
      </div>

      <ul class='years'></ul>
      <div class='range'></div>
      <ul class='visible_years'></ul>
    </div>
  </div>
</script>

<script id='timeline_modis-template' type='text/x-underscore-template'>
  <div class='timeline_coordinates'></div>
  <div class='timeline_legend'><p>QUICC alerts</p></div>
  <div class='timeline-inner'>
    <div class='time'>
      <ul class='quarters'></ul>
      <div class='line'><div class='tipsy'><span>Quarter</span><div class='arrow'></div></div></div>
      <ul class='visible_quarters'></ul>
    </div>
  </div>
</script>

<script id='timeline_forma-template' type='text/x-underscore-template'>
  <div class='timeline_coordinates'></div>
  <div class='timeline_legend'><p>FORMA alerts</p></div>
  <div class='timeline-inner'>
    <div class='action'>
      <a class='play' href='#'></a>
      <a class='pause' href='#'></a>
    </div>

    <div class='time'>
      <div class='line'><div class='tipsy'><span>Month</span><div class='arrow'></div></div></div>

      <div class='trail'>
        <div class='handle left'>
          <div class='tipsy'>
            <span></span>
            <div class='arrow'></div>
          </div>
        </div>

        <div class='handle right'>
          <div class='tipsy'>
            <span></span>
            <div class='arrow'></div>
          </div>
        </div>
      </div>

      <ul class='years'></ul>
      <div class='range'></div>
      <ul class='visible_months'></ul>
    </div>
  </div>
</script>

<script id='timeline_imazon-template' type='text/x-underscore-template'>
  <div class='timeline_coordinates'></div>
  <div class='timeline_legend'><p>Imazon SAD alerts</p></div>
  <div class='timeline-inner'>
    <div class='time'>
      <div class='line'><div class='tipsy'><span>Month</span><div class='arrow'></div></div></div>

      <div class='trail'>
        <div class='handle left'>
          <div class='tipsy'>
            <span></span>
            <div class='arrow'></div>
          </div>
        </div>

        <div class='handle right'>
          <div class='tipsy'>
            <span></span>
            <div class='arrow'></div>
          </div>
        </div>
      </div>

      <ul class='years'></ul>
      <div class='range'></div>
      <ul class='visible_months'></ul>
    </div>
  </div>
</script>

<script id='timeline_fires-template' type='text/x-underscore-template'>
  <div class='timeline_coordinates'></div>
  <div class='timeline_legend'><p>NASA active fire alerts</p></div>
  <div class='timeline-inner'>
    <div class='time'>
      <ul class="quarters">
        <li>
          <a href="#" class="year active selected" data-quarter="7">Past week</a>
        </li>
        <li>
          <a href="#" class="year active" data-quarter="3">Past 72 hours</a>
        </li>
        <li>
          <a href="#" class="year active" data-quarter="2">Past 48 hours</a>
        </li>
        <li>
          <a href="#" class="year active" data-quarter="1">Past 24 hours</a>
        </li>
      </ul>
    </div>
  </div>
</script>

<!-- Layer selector -->
<script id='layer_selector-template' type='text/x-underscore-template'>
  <a href='#' class='toggle'></a>
  <ul class='selected_layer' title='Change basemap'></ul>
  <ul class='layers'></ul>
</script>

<script id='layer-template' type='text/x-underscore-template'>

  <li id='{{ name }}' class="{{ name }} {{#landsat}}landsat{{/landsat}}">
    <a href='#'><i></i>{{title}}</a>
    {{#landsat}}<a href='#' data-source="landsat" class='source'></a>{{/landsat}}
    {{^landsat}}<a href='#' data-source="{{ name }}" class='source'></a>{{/landsat}}
  </li>
</script>

<script id='landsat_selector-template' type='text/x-underscore-template'>
  <ul class='landsat_layers'><div class='tip'></div></ul>
</script>

<!-- Analysis info -->
<script id='analysis_info-template' type='text/x-underscore-template'>
  <a href='#' class='toggle'></a>
  <div class='info_title'>{{ title }}</div>
  <div class='info_content'>
    <div class='info'>
      <div class='titles'>
        <strong class='title'>{{ title }}</strong>
        <span class='subtitle'>{{ subtitle }}</span>
      </div>
    </div>

    <div class='stats'>
      {{#spinner}}
      <div class='spinner'></div>
      <div class='error'>Earth Engine timed out.<br />Try smaller polygon.</div>
      {{/spinner}}

      {{^spinner}}
      {{#umd}}
      <div class='spinner'></div>
      <strong class='title'>Total selected area</strong>
      <ul>
        <li class='ha'>
          <p class='count'><strong>{{ ha }}</strong> Ha</p>
        </li>

        <li class='alert'>
          <strong class='title'>Loss {{ begin }}-{{ end }}</strong>
          <p class='count forma'>
            <strong>
              <span id='alerts-count'>
                {{ loss }}
              </span>
            </strong> {{ units }}
          </p>
        </li>

        <li class='alert'>
          <strong class='title'>Gain 2001-2012</strong>
          <p class='count gain'>
            <strong>
              <span id='alerts-count'>
                {{ gain }}
              </span>
            </strong> {{ units }}
          </p>
        </li>
        <li class='alert'>
        <p>This algorithm approximates the results by sampling the selected area. Results are more accurate at closer zoom levels.</p>
        </li>
      </ul>
      {{/umd}}

      {{#imazon}}
      <div class='spinner'></div>
      <strong class='title'>Total selected area</strong>
      <ul>
        <li class='ha'>
          <p class='count'><strong>{{ ha }}</strong> Ha</p>
        </li>

        {{#defor}}
        <li class='alert'>
          <strong class='title'>Deforestation alerts</strong>
          <p class='count forma'>
            <strong>
              <span id='alerts-count'>
                {{ defor }}
              </span>
            </strong> Ha
          </p>
        </li>
        {{/defor}}

        {{#degrad}}
        <li class='alert'>
          <strong class='title'>Degradation alerts</strong>
          <p class='count forma'>
            <strong>
              <span id='alerts-count'>
                {{ degrad }}
              </span>
            </strong> Ha

            {{#download}}<a href='{{download}}' target='_blank' class='download'>download</a>{{/download}}
          </p>
        </li>
        {{/degrad}}

        {{^defor}}
        {{^degrad}}
        <li class='alert'>
          <strong class='title'>Total {{ dataset }} alerts</strong>
          <p class='count forma'>
            <strong>
              <span id='alerts-count'>
                {{ alert_count }}
              </span>
            </strong>
          </p>
        </li>
        {{/degrad}}
        {{/defor}}
      </ul>
      {{/imazon}}

      {{^umd}}
      {{^imazon}}
      <div class='spinner'></div>
      <strong class='title'>Total selected area</strong>
      <ul>
        <li class='ha'>
          <p class='count'><strong>{{ ha }}</strong> Ha</p>
        </li>

        <li class='alert'>
          <strong class='title'>Total {{ dataset }} alerts</strong>
          <p class='count forma'>
            <strong>
              <span id='alerts-count'>
                {{ alert_count }}
              </span>
            </strong>

            {{#download}}<a href='{{download}}' target='_blank' class='download'>download</a>{{/download}}
          </p>
        </li>
      </ul>
      {{/imazon}}
      {{/umd}}
      {{/spinner}}

      <div class='shadow'></div>
    </div>

    <div class='info_controls'>
      <ul class='info_control_buttons'>
        <li><a class='subscribe_control{{#subdisabled}} disabled{{/subdisabled}}' href='#' title="Subscribe to alerts"></a></li>
        <li><a class='reset_control' href='#' title="Delete analysis"></a></li>
      </ul>
    </div>
  </div>
</script>

<!-- Analysis -->
<script id='analysis-template' type='text/x-underscore-template'>
  <a href='#' id='analysis_control' class='analysis_control' data-tip='Analyze an area on the map'></a>

  <div class='helper_bar'>
    <p>Draw in the map the area you want to analyze</p>
    <div class='options'>
      <a href='#' class='done disabled'>Done</a>
      <a href='#' class='cancel'>Cancel</a>
    </div>
  </div>
</script>

<script id='analysis_dropdown-template' type='text/x-underscore-template'>
  <ul>
    {{#urls}}
      <li><a href='{{url}}' target='_blank'>{{name}}</a></li>
    {{/urls}}
  </ul>
</script>

<script id='analysis_reset-template' type='text/x-underscore-template'>
  <p>Are you sure you want to delete the current analysis?</p>

  <div class='options'>
    <a href='#' class='button done delete'>Delete it</a>
    <a href='#' class='button cancel'>Cancel</a>
  </div>

  <span class='tail'></span>
</script>

<script id='analysis_subscribe-template' type='text/x-underscore-template'>
  <div class='content'>
    <%= form_for :area, :url => "//#{ENV['GFW_API_HOST']}/subscribe", :html => { :method => :post, :class => 'save-area' } do |f| %>
      <%= f.hidden_field :the_geom %>

      <a href='#' class='close'><svg><use xlink:href='#shape-close'></use></svg></a>
      <h1 class='title'>{{ title }}</h1>

      <div class='form'>
        <p class='help'><span>{{ help }}</span></p>

        <div class='input-field huge'>
          <input class='field' type='{{ input_type }}' name='area[email]' id='area_email' />
          <span class='holder'>{{ placeholder }}</span>
          <div class='icon error'></div>
          <div class='error_input_label'></div>
        </div>

        <a href='#' class='btn darker_glow send'>
          <span>{{ button_title }}</span>
        </a>
      </div>
    <% end -%>
  </div>
</script>

<!-- Search box -->
<script id='searchbox-template' type='text/x-underscore-template'>
  <strong>search</strong>
  <input type='text' placeholder='...............................' />
  <button>&nbsp;</button>
</script>

<!-- Share -->
<script id='share-template' type='text/x-underscore-template'>
  <a href='#' id='share_control' title=" {{ tooltip }} " class='share_control' data-tip='Share'></a>
</script>
<script id='share-country-template' type='text/x-underscore-template'>
  <div class="country-share share inner">
    <a href="#" id="share_control" title="Share this graphic " class="share_control" data-tip="Share">
      Share
      <span class="country-icons-share"></span>
    </a>
  </div>
</script>
<script id='share-country-entry-template' type='text/x-underscore-template'>
  <a href="#" class="icon-holder"><span class="country-icons-share_circle_white"></span></a>
</script>
<script id='share_dialog-template' type='text/x-underscore-template'>
  <a href='#' class='close'><svg><use xlink:href='#shape-close'></use></svg></a>
  <h1 class='title'>{{ title }}</h1>

  <div class='form'>
    <p class='help'><span>{{ help }}</span></p>

    <div class='input-field huge'>
      <div class="share_loading"></div>
      <input class='field' type='text' id='share_field' readonly />
      <ul class="mode_menu">
        <li class="selected first"><a href="#url" data-embed="url">link</a></li>
        <li class="last"><a href="#embed" data-embed="embed">embed</a></li>
      </ul>
    </div>

    <ul class="share_buttons">
      <li><a href="https://twitter.com/share?url=" target="_blank" class="twitter"><span>twitter</span></a></li>
      <li><a href="http://www.facebook.com/sharer.php?u=" target="_blank" class="facebook"><span>facebook</span></a></li>
      <li><a href="https://plus.google.com/share?url=" target="_blank" class="google_plus"><span>google+</span></a></li>
    </ul>
  </div>
</script>

<!-- UMD options -->
<script id='umd_options-template' type='text/x-underscore-template'>
  <a href='#' id='umd_options-control' title=" {{ tooltip }} " class='umd_options_control' data-tip='Change UMD/Google layer intensity'></a>
</script>

<script id='umdoptions_dialog-template' type='text/x-underscore-template'>
  <a href='#' class='close'><svg><use xlink:href='#shape-close'></use></svg></a>
  <h2 class='source_category_title'>{{ title }}</h2>

  <div class='form'>
    <p>UMD/Google tree cover loss & extent.</p>
    <!--
    <p>Compression:
      <input type=radio value='0.3' name=compression class='compression_option' checked=checked>0.3</input>
      <input type=radio value='0.4' name=compression class='compression_option'>0.4</input>
      <input type=radio value='0.5' name=compression class='compression_option'>0.5</input>
      <input type=radio value='0.6' name=compression class='compression_option'>0.6</input>
      <input type=radio value='0.7' name=compression class='compression_option'>0.7</input>
      <input type=radio value='1' name=compression class='compression_option'>1</input>
    </p>
    -->
    <p class='canopy'>Change canopy threshold. <a href="#" data-source="canopy" class="source info"></a></p>
    <p class='trees'><span class='tree_icon'></span><span class='forest_icon'></span></p>
    <ul>
      <li class='slider_option p0'   data-option='0'>0%</li>
      <li class='slider_option p10'  data-option='10'>10%</li>
      <li class='slider_option p15'  data-option='15'>15%</li>
      <li class='slider_option p20'  data-option='20'>20%</li>
      <li class='slider_option p25'  data-option='25'>25%</li>
      <li class='slider_option p30'  data-option='30'>30%</li>
      <li class='slider_option p50'  data-option='50'>50%</li>
      <li class='slider_option p75'  data-option='75'>75%</li>
      <li class='slider_option p100' data-option='100'>100%</li>
    </ul>
    <p class='slider_container'>
      <span class='slider'><input type=range min=10 max=75 value=10 id='canopy_slider'></span>
      <span class='visible_range'></span>
    </p>
    <p>
      <a href='#' class='cancel'>Cancel</a>
      <a href='#' class='apply'>Apply</a>
    </p>
  </div>
</script>

<script id='window-template' type='text/x-underscore-template'>
  <a href='#' class='close'><svg><use xlink:href='#shape-close'></use></svg></a>
  <div class='content'></div>
</script>
